<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="ptb20 plr30">
				<view class="box">
					<view class="item flex-box">
						<view class="fs30 col3">姓名</view>
						<input type="text" placeholder="请输入" v-model="formData.username"
							class="col3 flex-grow-1 pl30 tr" placeholder-class="colb" />
					</view>
					<view class="item flex-box">
						<view class="fs30 col3">联系电话</view>
						<input type="number" maxlength="11" placeholder="请输入" v-model="formData.mobile"
							class="col3 flex-grow-1 pl30 tr" placeholder-class="colb" />
					</view>
					<view class="item flex-box" v-if="formData.type=='other'">
						<view class="fs30 col3">验证码</view>
						<input type="number" maxlength="4" placeholder="请输入" v-model="formData.code"
							class="col3 flex-grow-1 pl30 tr" placeholder-class="colb" />
						<view class="col4 fs30 pl30" @click="getCode()">{{codeText}}</view>
					</view>
				</view>
				<view class="box mt20" v-if="formData.type=='other'">
					<view class="col3 fs30 pt30">经验描述</view>
					<textarea placeholder="请输入" maxlength="255" class="textarea" v-model="formData.experience"
						placeholder-class="colb"></textarea>
				</view>
				<view class="btn" @click="bindSubmit">提交</view>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {

				disabledCode: false,
				codeText: '验证码',
				formData: {
					username: '',
					mobile: '',
					type: '',
					task_id: ''
				}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {

			let param = JSON.parse(options.param);
			this.formData.type = param.type;
			this.formData.task_id = param.task_id;
			if (param.type == 'self') {
				this.getRealInfo()
			}
		},
		methods: {
			getRealInfo() {
				this.$core.get({
					url: '/xilujob.task/my_intention',
					success: ret => {
						this.formData.username = ret.data.username;
						this.formData.mobile = ret.data.mobile;
					}
				});
			},
			//获取验证码
			getCode() {
				if (this.disabledCode) return false;
				let mobile = this.formData.mobile;
				if (!mobile) {
					uni.showToast({
						title: '手机号不得为空',
						icon: 'none'
					})
					return false
				}
				this.$core.post({
					url: 'sms/send',
					data: {
						mobile: mobile,
						event: 'taskapply'
					},
					success: (ret) => {
						this.timeCut();
					}
				});
			},
			// 倒计时
			timeCut() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + 's';
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + 's';
					if (this.codeText < 0 + 's') {
						this.disabledCode = false;
						this.codeText = '验证码';
					}
				}, 1000);
			},
			bindSubmit() {
				let data = this.formData;
				var rule = [{
						name: 'username',
						rules: ['require'],
						errorMsg: {
							require: '请填写姓名',
						}
					},
					{
						name: 'mobile',
						rules: ['require'],
						errorMsg: {
							require: '请填写手机号'
						}
					}
				];
				if (data.type == 'other') {
					rule.push({
						name: 'code',
						rules: ['require', 'length:4'],
						errorMsg: {
							require: '请填写验证码',
							gt: '验证码四位数',
						}
					});
					rule.push({
						name: 'experience',
						rules: ['require'],
						errorMsg: {
							require: '请填写经验',
						}
					})
				}
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				let page = this;
				this.$core.post({
					url: 'xilujob.task/enroll',
					data: data,
					success: ret => {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							success() {
								page.getOpenerEventChannel().emit("taskEnrollSuccess", {});
								uni.navigateBack();
							}
						})

					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 0 30rpx;

		.item {
			height: 110rpx;
		}

		.item+.item {
			border-top: 1px solid #E7E7E7;
		}

		.textarea {
			width: 100%;
			padding: 30rpx 0 0;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.btn {
		margin-top: 70rpx;
		width: 580rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background: var(--primary);
		border-radius: 8rpx;
		margin-left: auto;
		margin-right: auto;
	}
</style>